<!DOCTYPE html>
<html>
  <head>
    <title>Sample document 3</title>
    <!-- <link rel="stylesheet" href="style3.css"> -->
    <style>
        #demo-table{
              font: 100% sans-serif;
              background-color: #efe;
              border-collapse: collapse;
              empty-cells: show;
              border: 1px solid #7a7;
        }
        caption{
              text-align: left;
              font-weight: bold;
              font-size: 200%;
              border-bottom: .2em solid #4ca;
              margin-bottom: .5em;
        }
        #demo-table tr,th,td{
            background-color: rgb(235,255,235);
            border: 1px solid gray;
        }
        tbody > tr > th{
            text-align: left;
        }
        tfoot > tr > th{
            text-align: left;
        }
        thead > tr:first-child > th{
            color:blue;
        }
        tbody > tr > td{
            padding:.5em .5em .5em 3em;
            background-color: rgb(197,235,255);
        }
        tfoot > tr > td{
            padding:.5em .5em .5em 3em;
            background-color: rgb(197,235,255);
        }
        #demo-table sup {
          font-size: 75%;
        }
        #demo-table > thead > tr + tr > th {
          font-style: italic;
          color: gray;
        }

        #demo-table th {
          font-weight: bold;
          padding-left: .5em;
        }

        #demo-table th,
        #demo-table td {
          text-align: right;
          padding-right: .5em;
        }

        #demo-table > tfoot > tr:first-child td {
          border-top: .2em solid #7a7;
        }
    </style>
  </head>
  <body>
    <table id="demo-table">
      <caption>Oceans</caption>
      <thead>
        <tr>
          <th></th>
          <th>Area</th>
          <th>Mean depth</th>
        </tr>
        <tr>
          <th></th>
          <th>million km<sup>2</sup></th>
          <th>m</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Arctic</th>
          <td>13,000</td>
          <td>1,200</td>
        </tr>
        <tr>
          <th>Atlantic</th>
          <td>87,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Pacific</th>
          <td>180,000</td>
          <td>4,000</td>
        </tr>
        <tr>
          <th>Indian</th>
          <td>75,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Southern</th>
          <td>20,000</td>
          <td>4,500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>361,000</td>
          <td></td>
        </tr>
        <tr>
          <th>Mean</th>
          <td>72,000</td>
          <td>3,800</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>